<template>
  <div id="demo">
    <button @click="show = !show">Toggle render</button>

    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__tada"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <!-- <p v-if="show">hello</p> -->
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    beforeEnter(el) {
      console.log("beforeEnter");
      // ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    enter(el, done) {
      console.log("enter");
      // ...
      // done();
    },
    afterEnter(el) {
      console.log("afterEnter");
      // ...
    },
    enterCancelled(el) {
      console.log("enterCancelled");
      // ...
    },

    // --------
    // 离开时
    // --------

    beforeLeave(el) {
      console.log("beforeLeave");
      // ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    leave(el, done) {
      console.log("leave");
      // ...
      // done();
    },
    afterLeave(el) {
      console.log("afterLeave");
      // ...
    },
    // leaveCancelled 只用于 v-show 中
    leaveCancelled(el) {
      console.log("leaveCancelled");
      // ...
    },
  },
};
</script>

<style scoped>
</style>